<template>
  <div class="change-record-info">
    <h3 v-if="baseInfo.changes && baseInfo.changes.length>0">{{ formatTime(baseInfo.createTime, 'YYYY-MM-DD HH:mm') }}变更为：</h3>
    <h3 v-else>上次信息：</h3>
    <el-row :gutter="12">
      <el-col :span="24" class="margin-col">
        <span>收货信息：</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>国家：</span>
        <span :class="{'change-item': getChangeItemStyle('countryCode', baseInfo.changes)}">{{ getDictionaryLabel(baseInfo.countryCode, country_code) }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>商业注册登记号：</span>
        <span :class="{'change-item': getChangeItemStyle('businessRegistrationNo', baseInfo.changes)}">{{ baseInfo.businessRegistrationNo }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>收货人：</span>
        <span :class="{'change-item': getChangeItemStyle('consignee', baseInfo.changes)}">{{ baseInfo.consignee }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>公司名称：</span>
        <span :class="{'change-item': getChangeItemStyle('companyName', baseInfo.changes)}">{{ baseInfo.companyName }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>电话/手机：</span>
        <span :class="{'change-item': getChangeItemStyle('phone', baseInfo.changes)}">{{ baseInfo.phone }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>收货地址：</span>
        <span
          style="font-weight: bold"
          :class="{'change-item': getChangeItemStyle('receivingAddress', baseInfo.changes)}"
        >{{ baseInfo.receivingAddress }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>邮编：</span>
        <span :class="{'change-item': getChangeItemStyle('postCode', baseInfo.changes)}">{{ baseInfo.postCode }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>邮箱：</span>
        <span :class="{'change-item': getChangeItemStyle('email', baseInfo.changes)}">{{ baseInfo.email }}</span>
      </el-col>
      <el-col :span="24" class="margin-col">
        <span>发货信息：</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>贸易术语：</span>
        <span
          :class="{'change-item': getChangeItemStyle('tradeTerms', baseInfo.changes)}"
        >{{ getDictionaryLabel(baseInfo.tradeTerms, trade_terms) }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>发货仓库：</span>
        <span
          :class="{'change-item': getChangeItemStyle('deliveryWarehouseCode', baseInfo.changes)}"
        >{{ getDictionaryLabel(baseInfo.deliveryWarehouseCode, delivery_warehouse) }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>运输方式：</span>
        <span
          :class="{'change-item': getChangeItemStyle('transportType', baseInfo.changes)}"
        >{{ getDictionaryLabel(baseInfo.transportType, transport_type) }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>货代方式：</span>
        <span
          :class="{'change-item': getChangeItemStyle('forwarderType', baseInfo.changes)}"
        >{{ getDictionaryLabel(baseInfo.forwarderType, forwarder_type) }}</span>
      </el-col>

      <div
        v-if="baseInfo.forwarderType === '我司货代'"
      >
        <el-col :span="12" class="margin-col">
          <span>我司货代询价：</span>
          <span
            :class="{'change-item': getChangeItemStyle('forwarderInquiry', baseInfo.changes)}"
          >{{ formatMoneyAmount(baseInfo.forwarderInquiry) }}</span>
        </el-col>
        <el-col :span="12" class="margin-col">
          <span>我司货代询价币种：</span>
          <span
            :class="{'change-item': getChangeItemStyle('forwarderInquiryCurrency', baseInfo.changes)}"
          >{{ getDictionaryLabel(baseInfo.forwarderInquiryCurrency, currency) }}</span>
        </el-col>
        <el-col :span="12" class="margin-col">
          <span>我司货代交付地：</span>
          <span
            :class="{'change-item': getChangeItemStyle('forwarderDeliveryPlace', baseInfo.changes)}"
          >{{ baseInfo.forwarderDeliveryPlace }}</span>
        </el-col>
      </div>

      <div
        v-if="baseInfo.forwarderType === '客户货代'"
      >
        <el-col :span="12" class="margin-col">
          <span>客户货代公司：</span>
          <span :class="{'change-item': getChangeItemStyle('forwarderCompany', baseInfo.changes)}">{{ baseInfo.forwarderCompany }}</span>
        </el-col>
        <el-col :span="12" class="margin-col">
          <span>客户货代联系人：</span>
          <span :class="{'change-item': getChangeItemStyle('forwarderContact', baseInfo.changes)}">{{ baseInfo.forwarderContact }}</span>
        </el-col>
        <el-col :span="12" class="margin-col">
          <span>客户货代联系电话：</span>
          <span :class="{'change-item': getChangeItemStyle('forwarderPhone', baseInfo.changes)}">{{ baseInfo.forwarderPhone }}</span>
        </el-col>
        <el-col :span="12" class="margin-col">
          <span>客户货代联系邮箱：</span>
          <span :class="{'change-item': getChangeItemStyle('forwarderEmail', baseInfo.changes)}">{{ baseInfo.forwarderEmail }}</span>
        </el-col>
      </div>

      <el-col :span="12" class="margin-col">
        <span>唛头：</span>
        <span :class="{'change-item': getChangeItemStyle('shippingMark', baseInfo.changes)}">{{ baseInfo.shippingMark }}</span>
      </el-col>
      <el-col :span="12" class="margin-col">
        <span>特殊文件说明：</span>
        <span :class="{'change-item': getChangeItemStyle('specialDocDesc', baseInfo.changes)}">{{ baseInfo.specialDocDesc }}</span>
      </el-col>
    </el-row>
    <el-divider v-if="baseInfo.changes && baseInfo.changes.length>0" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getDictionaryLabel, formatMoneyAmount, formatTime } from '@/utils/tools'

export default {
  name: 'ChangeRecordInfo',
  props: {
    baseInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      getDictionaryLabel,
      formatMoneyAmount,
      formatTime
    }
  },
  computed: {
    ...mapState({
      country_code: state => state.base.country_code,
      trade_terms: state => state.base.trade_terms,
      delivery_warehouse: state => state.base.delivery_warehouse,
      transport_type: state => state.base.transport_type,
      forwarder_type: state => state.base.forwarder_type,
      currency: state => state.base.currency
    })
  },
  methods: {
    getChangeItemStyle(item, changes) {
      changes = changes || []
      const index = changes.indexOf(item)
      return index > -1
    }
  }
}
</script>

<style lang="scss" scoped>
.change-record-info {
  font-size: 14px;
  .margin-col {
    margin-top: 22px
  }
  .change-item {
    color: red
  }
}
</style>
